<template>
  <div id='ScreenHeader'>
    <div class="flex header-box">
      <div class="flex">
        <img class="title" src="@/assets/images/screen/title.png" alt="">
        <div class="tabs flex">
          <div class="tab" @click="handleChangeTab(item, index)" :class="{active: activeIndex === index}" v-for="(item, index) in tabList" :key="index">{{item.text}}</div>
        </div>
      </div>
      <div class="right-menu flex">
        <div class="date-now">{{timeNow}}</div>
        <div class="line"></div>
        <div class="back flex" @click="handleBackToSystem">
          <img class="icon" src="@/assets/images/screen/back.png" alt="">
          <span>返回后台</span>
        </div>
          <div class="logout flex" @click="beforeExit">
            <img class="icon" src="@/assets/images/screen/logout.png" alt="">
            <span>退出登录</span>
          </div>
      </div>
    </div>
  </div>
</template>
<script lang='ts'>
import {Component, Watch, Vue} from 'vue-property-decorator'

@Component
export default class ScreenHeader extends Vue {
  userInfo: any = {}
  activeIndex: number = 0
  tabList: any[] = [
    {
      text: '首页大屏',
      url: '/largeScreen/index/indexContent'
    },
    {
      text: '平台交易信息',
      url: '/largeScreen/index/platform'
    },
    {
      text: '出行人信息',
      url: '/largeScreen/index/traveler'
    },
    {
      text: '出游信息',
      url: '/largeScreen/index/travelInfo'
    },
    {
      text: '产品信息',
      url: '/largeScreen/index/product'
    }
  ]

  timeNow: string = ''
  timer: number = 0

  getTimeNow () {
    this.timer = setInterval(() => {
      this.timeNow = new Date().toLocaleString()
    }, 0)
  }
  created () {
    this.init()
    this.getTimeNow()
  }
  destroyed () {
    clearInterval(this.timer)
  }
  // 初始化
  init () {
    let {path} = this.$route
    this.activeIndex = this.tabList.findIndex((item: any) => item.url === path)
  }
  handleChangeTab (item: any, index: number) {
    this.activeIndex = index
    console.log(item.url);

    this.$router.push(item.url)
  }
  handleBackToSystem () {
    this.$router.push('/')
  }
  // 退出前
  beforeExit () {
    this.$confirm({
      title: '提示',
      content: '是否退出登录？',
      onOk: () => {
        this.$api.homeLogoutFetch().then(() => {
          this.$message.success('退出成功!');
          this.$util.clearStorage();
          this.$router.push('/login');
        })
      },
      onCancel () {}
    })
  }
}
</script>
<style lang='scss' scoped>
#ScreenHeader {
  color: #fff;
  background-color: #131c35;
  padding-bottom: 15px;
  .header-box {
    justify-content: space-between;
    .title {
      width: 200px;
      padding: 10px 0;
    }
    .tabs {
      margin-left: 15px;
      .tab {
        width: 100px;
        height: 47.77px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 15px;
        font-size: 15px;
        color: #51A9FF;
        cursor: pointer;
        &.active {
          color: #1FDEDB;
          background-color: rgba(34, 226, 223, 0.19);
        }
      }
    }
    .right-menu {
      .date-now {
        padding-right: 10px;
      }
      .line {
        width: 1px;
        height: 13px;
        border-right: 1px solid #fff;
      }
      .back {
        padding: 0 30px;
        cursor: pointer;
      }
      .logout {
        cursor: pointer;
      }
      .icon {
        width: 15px;
        height: 15px;
        margin-right: 10px;
      }
    }
  }
}
</style>
